<template>
  <div class="personal-container">
    <div class="header">
      <div class="header-left">
        <div class="left-img"><el-image :preview-src-list="srcList" :src="personalInfo.headImg"></el-image></div>
        <div class="left-text">{{personalInfo.username}}</div>
      </div>
      <div class="header-right">
        <el-button type="warning" @click="logout">退出登录</el-button>
      </div>
    </div>
    <div style="font-size: 40px;color: aliceblue;margin: 20px 0">个人介绍</div>
    <div class="self">
      <textarea class="self-textarea" name="" id="" rows="15" :value="personalInfo.selfIntroduction"></textarea>
    </div>
  </div>
</template>

<script>
import { getPersonal } from '../../api/personal/index'
export default {
  data() {
    return {
      personalInfo: {},
      srcList:['https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/1338/baseimg.jpeg']
    }
  },
  methods: {
    init() {
      let username = JSON.stringify(localStorage.getItem('username')) 
      getPersonal(username).then( (res) => {
        console.log(res.data);
        if(res.data.code == 20000) {
          this.personalInfo = res.data.data[0]
          // console.log(this.personalInfo);
        }
      })
    },
    logout() {
      localStorage.clear()
      this.$router.push('/home')
      this.$router.go(0)
    }
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>
.header {
  margin-top:10px ;
  backdrop-filter: blur(20px);
  font-size: 40px;
  height: 60px;
  position: relative;
}
.header-left {
  display: flex;
}
.header-right {
  position: absolute;
  top: 0px;
  right: 30px;
  line-height: 100%;
}
.el-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.left-text {
  padding-left: 30px;
}
.self-textarea {
  background-color: rgba(255, 255, 255, .5);
  border: none;
  border-radius: 4px;
  width: 100%;
  font-size: 25px;
}
</style>